<!DOCTYPE html>
<html lang="en">

<head>
  <title>DataPipe Primer</title>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/jspsych@7.3.3"></script>
  <link href="https://unpkg.com/jspsych@7.3.3/css/jspsych.css" rel="stylesheet" type="text/css">
  <script src="https://unpkg.com/@jspsych-contrib/plugin-pipe"></script>
  <script src="https://unpkg.com/@jspsych/plugin-instructions@1.1.3"></script>
</head>

<body>
  <script>

    const filename = "subject_jspsych123.csv"
    const save_data = {
      type: jsPsychPipe,
      action: "save",
      experiment_id: "********", // 请填写自己在 DataPipe 的 experiment ID
      filename: filename,
      data_string: () => jsPsych.data.get().csv()
    };

    const jsPsych = initJsPsych();
    var hello_trial = {
      type: jsPsychInstructions,
      pages: [
        '欢迎您进入本仓库 https://gitee.com/epool/data-pipe_primer 体验 DataPipe 的使用方法',
        `<p>使用 jsPsych时，可以通过控件 jsPsychPipe 来配置 DataPipe。</p>
        <p>当您正确设置 experiment_id 时，您的数据可以轻松的上传到 DataPipe。</p>
        <p>您可以 clone 该项目，修改 experiment_id 为自己的实验ID。 </p>
        `,
        '<p>点击下一页，上传数据。</p> <p>前提是你配置了自己的 experiment_id </p>'
      ],
      button_label_next: "下一页",
      button_label_previous: "返回上一页",
      show_clickable_nav: true
    }

    var final = {
      type: jsPsychInstructions,
      pages: [
        `<p>数据已经提交，请检查osf数据库。</p>
        <div><img style="width:400px" src="./imgs/image 15.png"></img></div>
        `
      ],
      button_label_next: "结束",
      button_label_previous: "上一页",
      show_clickable_nav: true
    }

    jsPsych.run([hello_trial, save_data, final]);
  </script>
</body>

</html>